<template>
  <div class="index_hot">
    <div class="haopin">
      <h1 class="title">最受好评电影</h1>
      <van-swipe
        class="my-swipe"
        indicator-color="white"
        :loop="false"
        :width="80"
        :show-indicators="false"
        :stop-propagation="false"
      >
        <van-swipe-item
          v-for="(ele,index) in MovieList"
          :key="index"
          @click="MovieDetail(ele.movieId)"
        >
          <div class="haopin-item">
            <div class="haopin-img">
              <img :src="ele.poster" alt />
              <div class="msk">{{ele.score? '观众评分 ' +ele.score:'暂无评分'}}</div>
            </div>
            <h5>{{ele.name.length>6?ele.name.slice(0,5)+'...':ele.name}}</h5>
          </div>
        </van-swipe-item>
        <van-swipe-item></van-swipe-item>
        <van-swipe-item></van-swipe-item>
      </van-swipe>
    </div>
    <div class="hot-list" :id="movieID" ref="hotlist">
      <van-list v-model="loading" error-text="请求失败，点击重新加载" @load="onLoad">
        <Hotitem v-for="(item,index) in datalist" :hot="item" :key="index"></Hotitem>
      </van-list>
    </div>
  </div>
</template>
<script>
import Hotitem from "../components/Hotitem.vue";
export default {
  name: "index_hot",
  data() {
    return {
      MovieList: [],
      movieID: [],
      datalist: [],
      loading: false,
      finished: false,
      start: 0,
      end: 10
    };
  },
  components: {
    Hotitem
  },
  mounted() {},
  created() {
    this.GetTopRateMovies();
    this.onLoad();
    // this.stopTouchendPropagationAfterScroll();
  },
  methods: {
    stopTouchendPropagationAfterScroll() {
      var locked = false;
      window.addEventListener(
        "touchmove",
        function(ev) {
          locked ||
            ((locked = true),
            window.addEventListener("touchend", stopTouchendPropagation, true));
        },
        true
      );
      function stopTouchendPropagation(ev) {
        ev.stopPropagation();
        window.removeEventListener("touchend", stopTouchendPropagation, true);
        locked = false;
      }
    },
    GetmovieID() {
      this.axios({
        method: "get",
        url: "index/movieOnInfoList"
      }).then(ref => {
        this.movieID = ref.data.movieIds;
        console.log(this.movieID);
      });
    },
    GetTopRateMovies() {
      this.axios({
        method: "get",
        url: "/index/topRatedMovies"
      })
        .then(result => {
          this.MovieList = result.data.movieList;
          console.log();
        })
        .catch(err => {
          console.log("err", err);
        });
    },
    onLoad() {
      if (this.end > 60) {
        this.loading = false;
        return;
      } else {
        this.axios({
          method: "get",
          url: "index/movieOnInfoList"
        })
          .then(ref => {
            this.movieID = ref.data.movieIds;
            let CutMovieID = this.movieID.slice(this.start, this.end).join(",");
            return CutMovieID;
          })
          .then(e => {
            this.axios({
              method: "get",
              url: "index/moreComingList",
              params: {
                movieIds: e
              }
            }).then(e => {
              (this.start = this.end), (this.end += 10);
              this.datalist.push(...e.data.coming);
              this.loading = false;
            });
          });
      }
    },
    MovieDetail(MovieId) {
      this.$router.push({ name: "Detail", params: { MovieId } });
    }
  }
};
</script>
<style lang="less" scoped>
.haopin {
  padding: 15px 4px 15px 0px;
  background-color: #fff;
  width: 100%;
  .title {
    font-size: 14px;
    color: #333;
    margin: 10px 6px;
    font-weight: 300;
  }
}
.van-swipe-item {
  padding: 0 6px;
  .haopin-img {
    width: 100%;
    position: relative;
    img {
      width: 100%;
      height: 130px;
    }
    .msk {
      position: absolute;
      left: 4px;
      bottom: 2px;
      color: #faaf00;
      font-size: 11px;
      font-weight: 600;
    }
  }
  h5 {
    font-size: 10px;
    color: #222;
    margin: 0 0 1px;
  }
}
.list-wrap {
  width: 100%;
  background-color: #fff;
  margin-top: 10px;
  margin-bottom: 60px;
}
</style>